<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*
            将所有的段落设置为红色（字体）

            元素选择器：
                作用： 根据标签名来选中指定的元素
                语法：标签名{}
                例子： p{} h1{} div{}
        */
        /* p{
            color: #f00;
        }

        h1{
            color: green;
        } */

        /*
            将段luo3设置为红色

            id选择器
                作用：根据元素的ID属性值选中一个元素
                诘法：#id属性值{}
                例子：#box{} #red{}
        */
        /* #red{
            color: red;
        } */

        /*
            将段luo6和段落7设置为红色

            类选择器
                作用：根据元素的class属性值选中一组元素
                语法：.class属性值{}
                例子：.red{}

            可以同时为一个元素设置多个class属性
        */
        .red{
            color: red;
        }

        .abc {
            font-size: 50px;
        }

        /*
            通配选择器
                作用：选中所有元素
                语法：*{}
        */

    </style>
</head>
<body>
    <h1>我是标题</h1>
    <p>少小离家老大回</p>
    <p>段luo2</p>
    <p id="red">段luo3</p>
    <p>段luo4</p>
    <p>少小离家老大回</p>
    <p class="red">段luo6</p>
    <p class="red abc">段luo7</p>

</body>
</html>